<template>
<!--  一级路由-->
  <div id="id-menu">
    <router-link class="defalt" v-for="(item, index) in dataList" :key="index" :to="item.path">{{item.text}}</router-link>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  created () {
    console.log('$route.params.path', this.$route.path)
  },
  data () {
    return {
      dataList: [
        {
          text: 'vuex',
          path: '/home'
        },
        {
          text: 'cart',
          path: '/cart'
        },
        {
          text: 'BootStrap',
          path: '/bootstrap'
        },
        {
          text: 'NOTFOUND',
          path: '/*'
        }
      ]
    }
  }
}
</script>

<style scoped>
.defalt {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  color: aliceblue;
  transition: 0.2s;
}
.defalt:hover {
  background: #5b5b5b;
}
.active {
  color: #0aebeb;
  padding: 10px 30px;
  transition: 0.2s;
}
#id-menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: #333232;
  padding: 2% 0;
  align-items: center;
}
</style>
